import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import UserCell from '../components/UserCell'
import axios from '../axios'
import Tabs from '../components/Tabs/Tabs'
import FlatList from '../components/FlatList'
import GoodsList from '../components/Goods/GoodsList'
import AlbumList from '../components/Album/AlbumList'
import { connect } from 'react-redux'

const BusinessCenter = ({ route, user }) => {
  const { userId } = route.params
  console.log(route.params)

  const [businessInfo, setBusinessInfo] = useState({})
  const [goodsList, setGoodsList] = useState([])
  const [newsList, setNewsList] = useState([])
  const [tabIndex, setTabIndex] = useState(0)
  const [status, setStatus] = useState('loading')
  const tabs = [
    { id: 0, name: '物品' },
    { id: 1, name: '动态' }
  ]

  useEffect(() => {
    axios.get('/fan/business-home', {
      id: userId
    }).then(res => {
      setBusinessInfo(res.data.user)
      setGoodsList(res.data.goodsList)
      setNewsList(res.data.newsList)
      setStatus('noMore')
    })
  }, [])
  const tabChange = (index) => {
    setTabIndex(index)
  }

  const renderList = () => {
    if (tabIndex === 0) {
      return <GoodsList data={goodsList} status={status}></GoodsList>
    }
    return <AlbumList data={newsList} status={status}></AlbumList>
  }
  return (
    <View style={styles.container}>
      <UserCell data={businessInfo} borderBottom></UserCell>
      <Tabs current={tabIndex} list={tabs} onChange={tabChange}></Tabs>
      {/* <FlatList data={tabIndex === 0 ? goodsList : newsList}
        renderItem={renderItem}></FlatList> */}
      {
        renderList()
      }
    </View>
  )
}

export default connect((state) => {
  return {
    user: state.userReducer
  }
})(BusinessCenter)

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})